<template>
	<uni-popup ref="popup" type="bottom" class="popup-box">
	    <view class="new-date-pick-main bgfff">
	        <view class="px-2 pt-2 lineStyle default-flex justify-between" style="display: flex;justify-content: space-between;padding: 0 20rpx;">
	            <view class="c999" @click="closePick">取消</view>
	            <view class="confirmBtn" @click="confirm()">确定</view>
	        </view>
	        <picker-view indicator-class='new-date-pick-col' indicator-style="height: 56rpx;" style="width: 100%; height: 380rpx;" 
			:value="value"
	        @change="bindChange">
	            <picker-view-column>
	            <view v-for="(item,index) in data" 
	            v-key="index" style="line-height: 56rpx; font-size:20px; text-align: center;">{{item[label]}}°C</view>
	            </picker-view-column> 
	        </picker-view>
	    </view>
	</uni-popup>
</template>

<script>
export default {
		name:"gdPicker",
		props:{
			label:{
				type:String
			},
			data:{
				type:Array 
			}
		},
		data() {
			return { 
				propDate:'',
				value:[0],
				type:'',
				id:''
			}
		},
		
		methods:{
			confirm(){
				this.$emit('getVal',{val:this.dataVal?this.dataVal:this.data[0],type:this.type,id:this.id});
				this.closePick();
			}, 
			closePick() {
				this.$refs.popup.close();
			},
			openPick (val,id,type) {
				this.value = [val-1]
				this.type = type
				this.$refs.popup.open(); 
				this.id = id
			},
			clearPick() {
			    this.value='' 
			},  
			//选择滚动器改变触发事件
			bindChange (e) {
			    const val = e.detail.value;
 			    this.dataVal=this.data[val[0]];
			}
		}
	}
</script>

<style lang="scss" scoped>
    .lineStyle{
        font-size: 34rpx; 
    } 
	.popup-box{
		width: 100%;
	}
    .confirmBtn{
        color:#C8000B;
    }
    .new-date-pick{
        position: relative; 
    .new-date-pick-col{
        background-color: rgba(107, 187, 251, 0.23);
        color: #3A91FF;
    }
    }    
    .new-date-pick-col-text{
        color: #3A91FF;
        font-weight: 400;
    } 	
</style>
